<template>
  <v-card outlined class="mb-2 px-2 white">
    <!-- 转发区 -->
    <v-list-item v-show="feed.forwardId" class="forward_box">
      <v-list-item-avatar >
        <v-img
          class="elevation-6 can_click"
          :src="feed.forwardAvatar"
          @click="jumpUser(feed.forwardUserId)"
        ></v-img>
      </v-list-item-avatar>

      <v-list-item-content>
        <v-list-item-title class="font-weight-black can_click"  @click="jumpUser(feed.forwardUserId)">{{feed.forwardUserName}}</v-list-item-title>
      </v-list-item-content>

      <v-list-item-content style="text-align:right;">
        <v-list-item-title class="caption grey--text">{{feed.forwardTime}} 转发</v-list-item-title>
      </v-list-item-content>
      
    </v-list-item>

    <!-- 动态用户区 -->
    <v-card-actions>
      <v-list-item class="grow">
        <v-list-item-avatar>
          <v-img
            class="elevation-6"
            :src="feed.avatar"
            :class="feed.userId?'can_click':''"
            @click="jumpUser(feed.userId)"
          ></v-img>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title class="font-weight-black" :class="feed.userId?'can_click':''" @click="jumpUser(feed.userId)">{{feed.uname}}</v-list-item-title>
          <v-list-item-title class="caption grey--text ">{{feed.time}}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-card-actions>
    
    <!-- 内容区 -->
    <v-card-text class="font-weight-bold ps-5">{{feed.content}}</v-card-text>

    <!-- 按钮区 -->
    <v-card-actions>
      <v-list-item class="grow">
        <v-row
          align="center"
          justify="end"
        >

          <v-btn icon :color="feed.isForward?'blue':''" @click="toForward(feed.feedId)">
            <v-icon>mdi-repeat-variant</v-icon>
          </v-btn>  
          <span class="caption mr-5">{{feed.forwardCount}}</span>
          
          <v-btn icon :color="feed.isComment?'orange':''" @click="showCommentBox(feed)">
            <v-icon>mdi-comment-outline</v-icon>
          </v-btn>
          <span class="caption mr-5">{{feed.commentCount}}</span>

          <v-btn icon :color="feed.isLike?'pink':''" @click="toLike(feed)">
            <v-icon>mdi-heart</v-icon>
          </v-btn>
          <span class="caption">{{feed.likeCount}}</span>
        </v-row>
      </v-list-item>
    </v-card-actions>

    <!-- 评论表单 -->
    <v-list class="comment_box" v-show="feed.showComment">
      <v-list-item three-line>
        <v-list-item-avatar>
          <v-img v-show="!user.avatar" src="/upload/avatar/default.png"></v-img>
          <v-img v-show="user.avatar" :src="user.avatar"></v-img>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-form :ref="feed.forwardId +'#'+ feed.feedId">
            <v-textarea
              hint="评论内容请控制在1-255字以内"
              outlined
              label="评论:"
              counter="255"
              rows="2"
              :rules="commentRules"
              v-model="feed.sendContent"
              @blur="blurComment(feed)"
            ></v-textarea>
          </v-form>

        </v-list-item-content>

          <v-list-item-action>
          <v-btn outlined color="indigo" @click="toSendComment(feed)">评论</v-btn>
        </v-list-item-action>
      </v-list-item>
    </v-list>

    <!-- 下方评论区 -->
    <v-list v-show="feed.showComment" class="text-subtitle-2">
      <v-list-item >
        <v-list-item-title class="text-h6 font-weight-bold">评论区</v-list-item-title>
      </v-list-item>
      <v-list-item three-line v-for="comment in feed.comments" :key="comment.commentId">
        <v-list-item-avatar>
          <v-img :src="comment.avatar" class="can_click" @click="jumpUser(comment.userId)"></v-img>
        </v-list-item-avatar>

        <v-list-item-content>
          <p>
            <span class="light-blue--text text--darken-4 font-weight-bold can_click" 
              @click="jumpUser(comment.userId)">
            {{comment.uname}}: 
            </span>{{comment.content}}
          </p>
          
          <div>
            <span class="grey--text">{{comment.createTime}}</span>                    
            <v-btn icon class="ms-5" :color="comment.isLike?'pink':''" 
              @click="toLikeComment(feed, comment.commentId, comment.isLike)">
              <v-icon small>mdi-heart</v-icon>
            </v-btn>
            <span class="caption">{{comment.likeCount}}</span>     
          </div>
        </v-list-item-content>
      </v-list-item>

      <el-empty v-show="!feed.comments" description="暂无评论"></el-empty>
    </v-list>
  </v-card>
</template>

<script>

// 调用 this.$emit('queryFeed'); 更新feed
export default {
  name: 'MyFeed',
  props: ['feed'],
  data: ()=>({
    commentRules: [
      v => !!v || '评论不能为空！',
      v => (v && v.length > 0 && v.length <= 255) || '评论内容请控制在1-255字以内！'
    ],
  }),
  computed: {
    user(){
      return this.$store.state.user
    }
  },
  methods: {
    // 传入feed完成点赞、取消点赞
    toLike(feed){
      const userId = this.user.userId
      // 判断当前是否登录
      if(!userId) {
        this.$message.warning("请用户先登录！")
        return
      }
      const token = this.user.token

      // 已经like了
      if(feed.isLike){
        this.$utils.doDeleteAxios(this, '/api/feed/like', {
          data: this.$qs.stringify({userId, feedId: feed.feedId}), 
          headers: {token, 'Content-Type': 'application/x-www-form-urlencoded' }
        }, ()=>{ 
          // 更新该用户动态
          this.$emit('queryFeed')
        })
        return;
      }

      this.$utils.doPostAxios(this, '/api/feed/like', 
        this.$qs.stringify({userId, feedId: feed.feedId}), {
        headers: {token }
      }, ()=>{
          // 更新该用户动态
          this.$emit('queryFeed')
      })
    },
    // 真正转发feed
    doToForward(userId, token, feedId){
      this.$utils.doPostAxios(this, '/api/forward', 
        this.$qs.stringify({userId, feedId}), {
        headers: {token }
      }, (data, msg)=>{
        this.$message.success(msg)
        this.$emit('queryFeed')
      })
    },
    // 传入feedId进行转发
    toForward(feedId){
      const userId = this.user.userId
      const token = this.user.token
      
      if(userId && token){
        this.$messageBox.confirm('是否转发该动态？', '转发', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发送转发请求
          this.doToForward(userId, token, feedId)
        }).catch(()=>{})
        return 
      }

      // 未登录！
      this.$message.warning('请用户先登录！')
    },
    // 查询并更新feed的评论
    queryComment(feed, url, config){
      this.$utils.doGetAxios(this, url, config, (data)=>{
        feed.comments = data.map(item=>{
          item.createTime = this.$utils.dateFormat(item.createTime)
          return item
        })
      })
    },
    // 查询feed对应聊天框的记录
    doShowCommentBox(feed){
      // 发送请求
      const userId = this.user.userId
      const token = this.user.token
      
      if(userId && token){
        this.queryComment(feed, '/api/comment/feed/u', {
          params:{feedId: feed.feedId, userId},
          headers: {token }
        })
      }else{
        this.queryComment(feed, '/api/comment/feed', {
          params:{feedId: feed.feedId}
        })
      }
    },
    // 展示该feed的聊天框
    showCommentBox(feed){
      // 清空评论内容
      const key = feed.forwardId +'#'+ feed.feedId
      this.$refs[key].reset()

      if(feed.showComment){
        // 收起评论箱子
        feed.showComment = false
        return
      }
      this.doShowCommentBox(feed)

      feed.showComment = true
    },
    // 发送评论到feed
    doSendComment(token, feedId, content){
      const userId = localStorage.getItem('userId') 
      const msg = {
        userId, feedId, content 
      }
      // 发送评论！
      this.$utils.doPostAxios(this, '/api/comment', 
        this.$qs.stringify(msg),{
        headers: {token }
      }, (data, msg)=>{
        this.$message.success(msg)
        // 更新动态
        this.$emit('queryFeed')
      })
    },
    // 准备发送评论到feed
    toSendComment(feed){
      // 如果用户未登录！
      const token = localStorage.getItem('token')
      if(!token){
        this.$message.warning('请用户先登录！')
        return
      }

      const key = feed.forwardId +'#'+ feed.feedId
      // 满足可以
      if(this.$refs[key].validate()){
        this.$messageBox.confirm('确认发送评论？', '评论', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发送转发请求
          this.doSendComment(token, feed.feedId, feed.sendContent)
        }).catch(()=>{})
      }
    },
    // 准备点赞feed评论区中的评论
    toLikeComment(feed, commentId, isLike){
      const userId = this.user.userId
      const token = this.user.token

      if(userId && token){
        if(isLike){
          // 删除
          this.$utils.doDeleteAxios(this, '/api/comment/like', {
            data: this.$qs.stringify({userId, commentId}), 
            headers: {token, 'Content-Type': 'application/x-www-form-urlencoded' }
          }, ()=>{
            // 更新该动态的评论
            this.doShowCommentBox(feed)
          })
          return
        }
        
        this.$utils.doPostAxios(this, '/api/comment/like',
          this.$qs.stringify({commentId, userId}),{
          headers: {token }
        }, ()=>{
          // 更新该动态评论
          this.doShowCommentBox(feed)
        })
      }else{
        // 未登录！
        this.$message.warning('请用户先登录！')
      }
    },
    blurComment(feed){
      const key = feed.forwardId +'#'+ feed.feedId
      // 评论内容失去焦点时，取消警告
      this.$refs[key].resetValidation()
    },
    jumpUser(uid){
      if(uid)
        this.$utils.jumpUser(this, uid)
    }
  }
}
</script>

<style scoped>
.forward_box{
  border-bottom: 1px solid #E6E6FA;
}
.can_click{
  cursor: pointer;
}
.comment_box{
  border-top: 3px dashed #E6E6FA;
}
</style>